<template>
  <div
    class='pr'
    style="width:100%;height:100%;"
  >
    <div
      id='echart9'
      style="width:23vw;height:35vh;"
    ></div>

    <RepairViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import { init } from "echarts";
import RepairViewList from "./RepairViewList.vue";

export default {
  name: "box9",
  props: {
    chooseBatch: String,
  },
  components: {
    RepairViewList,
  },
  data: function () {
    return {
      flag: 2,
      dialog_visible: false,
      sub_title: null,
      filters: [],
      list: [
        {
          name: "资产",
          value: 87,
          count: 200,
          amount: 236885246.2,
        },
        { name: "闲置", value: 10 },
        { name: "在用", value: 62 },
        { name: "维修", value: 18 },
        { name: "报废", value: 12 },
      ],
      colors:[
        '#3c5cfa',
        '#20a5f7',
        '#fcd362',
        '#fc7041',
        '#01d9e3',
      ]
    };
  },
  watch: {
    flag: {
      handler: "initCharts",
      immediate: true,
    },
    chooseBatch() {
      this.getData();
    },
  },
  myChart: null,
  mounted() {
    // this.columns = await getColumns("RepairViewListModel");
    // this.getData();
    this.initCharts();
  },
  methods: {
    initCharts() {
      // const data = await this.$http.get(
      //   `/api/RepairReport/RepairLargeScreenModelIList?flag=${this.flag}`
      // );
      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart9"));
        // this.myChart.on("click", (ev) => {
        //   this.filters = [
        //     {
        //       Name: "ApplyTime",
        //       compare: ">=",
        //       value: ev.data.Ds,
        //     },
        //     {
        //       Name: "ApplyTime",
        //       compare: "<",
        //       value: ev.data.De,
        //     },
        //     {
        //       Name: "Repair_Id",
        //       compare: "==",
        //       value: ev.data.Repair_Id,
        //     },
        //   ];
        //   this.sub_title = `日期起:${ev.data.Ds.substring(
        //     0,
        //     10
        //   )} 日期止:${ev.data.De.substring(0, 10)} 维修工程师:${
        //     ev.data.RepairName
        //   }`;
        //   this.dialog_visible = true;
        // });
      }
      this.option = {
        title: {
          text: "设备状态分布",
          top: 16,
          left: 24,
          textStyle: {
            color: "#d6e2ff",
            fontSize: 18,
            fontWeight: 400,
            fontFamily: "Microsoft YaHei",
          },
        },
        legend: {
          orient: "vertical",
          itemWidth: 12,
          itemHeight: 12,
          top: 134,
          left: 267,
          textStyle: {
            color: "#d6e2ff",
            fontSize:14,
            padding:4
          },
          formatter: (e) =>
            `${e}: ${this.list.find((i) => i.name === e).value}%`,
          itemGap: 16,
        },
        tooltip: {
          show: true,
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.80)",
          borderColor: "transparent",
          formatter: (e) => {
            const data = e.data;
            return `
              <div style="width:188px;color:#ffffff;">
                 <div style="display:flex;"><span style="flex:0 0 75px;width:75px;height:17px;">资产数量：</span><span>${
                   data.count || 0
                 }</span></div>
                 <div style="display:flex;"><span style="flex:0 0 75px;width:75px;height:17px;">资产金额：</span><span>${
                   data.amount || 0
                 }</span></div>
                 <div style="display:flex;"><span style="flex:0 0 75px;width:75px;height:17px;text-align:right;">占比：</span><span>${
                   data.value || 0
                 }%</span></div>
              </div>`;
          },
        },
        series: [
          {
            type: "pie",
            width: 203,
            height: 203,
            top: 109,
            left: 24,
            bottom: 63,
            radius: ["60%", "100%"],
            label: { show: false },
            labelLine: { show: false },

            data: this.list,
          },
        ],
        color:this.colors
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option);
    },
    getData() {
      this.$http
        .get(
          `/api/StocktakingAccountReport/StocktakingReportG/${
            this.chooseBatch || "$"
          }`
        )
        .then((res) => {
         
          this.list = res.map((i) => ({
            ...i,
            name: i.EquipmentStatusEnumText,
            value: parseFloat((i.Proportion*100).toFixed(2)),
            count: i.Count,
            amount: i.Amount,
          }));
          this.initCharts();
        });
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style>
</style>